<template>
    <div class="">
        <div class="top"></div>
        <div class="us-title">
            <br/>
            <br/>
            <br/>
            <p class="us-p">实验室维修登记</p>
        </div>
        <div class="us-text">请填写完成下列信息：</div>
        <div class="us-main">
            <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
                <el-form-item label="实验室编号" style="width: 90%">
                    <el-input v-model="formLabelAlign.equipment_id" placeholder="如：1208"></el-input>
                </el-form-item>
                <el-form-item label="维修人员" style="width: 90%">
                    <el-input v-model="formLabelAlign.equipmentname"></el-input>
                </el-form-item>
                <el-form-item label="维修设备" style="width: 90%">
                    <el-input v-model="formLabelAlign.equipment" placeholder="如：桌子、椅子、灯具、门窗、等"></el-input>
                </el-form-item>
                <el-form-item label="维修方式" style="width: 90%">
                    <el-input v-model="formLabelAlign.equipmentstyle"></el-input>
                </el-form-item>
                <el-form-item label="维修结果" style="width: 90%">
                    <el-input v-model="formLabelAlign.equipmentresult"></el-input>
                </el-form-item>
                <el-form-item label="维修时间" style="width: 90%">
                    <el-input v-model="formLabelAlign.equipmenttime"></el-input>
                </el-form-item>
                <button type="primary" @click=""style="width: 180px" size="medium ">确 定 上 报</button>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                labelPosition: 'right',
                //上报设备损坏情况，实验室、设备名称、故障现象、上报时间、上报人员姓名、联系方式。
                formLabelAlign: {
                    equipment_id:'',
                    equipmentname:'',
                    equipment: '',
                    equipmentstyle: '',
                    equipmentresult: '',
                    equipmenttime:''
                }
            }
        },
        methods:{

        }
    };
</script>

<style scoped>
    @media (min-width: 768px){
        .top{
            width: 100%;
            height: 50px;
            background: linear-gradient(to right,#000000,#5e7382);
        }
        .us-title{
            width: 100%;
            height: 150px;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/background.jpg");
        }
        .us-p{
            color: white;
        }
        .us-main{
            text-align: center;
            width: 30%;
            margin: 0 auto;
        }
        .us-main button{
            width: 170px;
            height: 40px;
            margin: 20px;
            border-radius: 5px;
        }
        .us-text{
            margin-top: 20px;
            margin-left: 35%;
            margin-bottom: 20px;
        }
    }

    @media (max-width: 768px){
        .top{
            width: 100%;
            height: 50px;
            background: linear-gradient(to right,#000000,#5e7382);
        }
        .us-title{
            width: 100%;
            height: 150px;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/background.jpg");
        }
        .us-p{
            color: white;
        }
        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
        .us-main button{
            width: 150px;
            height: 40px;
            margin: 20px;
            border-radius: 5px;
        }
        .us-text{
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
    }
</style>
